<!DOCTYPE html>
<html ng-app="builderExample">
  <head>
    <meta charset="utf-8">
    <title>Builder example</title>
  </head>
  <body>

    <div custom-build></div>

    <script src="../bower_components/angular/angular.js" charset="utf-8"></script>
    <script src="../dist/schema-form.js" charset="utf-8"></script>
    <script src="../bower_components/objectpath/lib/ObjectPath.js"></script>

    <script type="text/javascript">
      angular.module('builderExample', ['schemaForm'])
             .run(function($templateCache) {
               // A template to use
               $templateCache.put('example-template.html', '<h1>Hello {{world}}</h1>');
             })
             .directive('customBuild', function($compile, sfBuilder) {
               return {
                 link: function(scope, element, attrs) {
                   scope.world = 'World';

                   // First a "canonical form definition", usually this is created by merging form
                   // definition from user and a schema.
                   var formDef = [
                     {type: 'example'}
                   ];

                   // A decorator is just an object that matches form `type` to a metadata object
                   // `replace` property is a boolean, if false the "old" way to build forms is
                   //  used for backwards compatability.
                   // `builder` is a function or a list of helper functions to manipulate the DOM during the build.
                   // For example to set proper ng-model value, or include child items
                   var decorator = {
                     example: {template: 'example-template.html', replace: true, builder: []}
                   };

                   // The builder creates a nice document fragment for you to place in the form.
                   var documentFragment = sfBuilder.build(formDef, decorator);

                   // Then plop the fragment into the element
                   element[0].appendChild(documentFragment);

                   // It isn't compiled yet though, so let's do that.
                   $compile(element.children())(scope);
                 }
               };
             });

    </script>
  </body>
</html>
